{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Visualization of Data"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The goal of this experiment is to study the goal of making data more visual, more easily understandable, in an intuitive manner."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Table of Contents\n",
    "* [Visualization of Data](#Visualization-of-Data)\n",
    "\t* [Points](#Points)\n",
    "\t* [Lines](#Lines)\n",
    "\t* [Bar charts](#Bar-charts)\n",
    "\t* [Pie charts](#Pie-charts)\n",
    "\t* [Geographic: Maps + data](#Geographic:-Maps-+-data)\n",
    "\t\t* [PShape](#PShape)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Points\n",
    "\n",
    "A plot made up of just points of data is sometimes called a \"scatter plot\" because the data are often scattered all  over the graph."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_6\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_6\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_6\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_6\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_6\">\n",
       "  <b>Sketch #6:</b><br/>\n",
       "  <canvas id=\"canvas_6\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_6\">\n",
       "  <button id=\"run_button_6\" onclick=\"startSketch('6');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_6\" onclick=\"pauseSketch('6');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_6\" onclick=\"setupSketch('6');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_6\" onclick=\"drawSketch('6');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #6 state:</b> <span id=\"state_6\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'int border;\\n\\nvoid setup() {\\n    size(500, 200); \\n    border = 30;\\n}\\n\\nvoid drawAxises(int x, int y, int w, int h) {\\n    fill(255);\\n    rect(x, y, w, h);\\n    line(x + border, y + border, x + border, y + h - border);\\n    line(x + border, y + h - border, x + w - border, y + h - border);\\n}\\n\\nvoid drawPoint(int x, int y, int w, int h, float px, float py) {\\n    fill(255, 0, 0);\\n    ellipse(px + border + x, h + y - border - py, 5, 5);\\n}\\n\\nvoid draw() {\\n    int chartX = 20;\\n    int chartY = 10;\\n    int chartWidth = width - chartX * 2;\\n    int chartHeight = height - chartY * 2;\\n    drawAxises(chartX, chartY, chartWidth, chartHeight);\\n    \\n    for (int i = 0; i < chartWidth - border * 2; i += 10) {\\n        drawPoint(chartX, chartY, chartWidth, chartHeight, i, \\n                  random(chartHeight - border * 2));\\n    }\\n    noLoop();\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_6\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_6\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_6\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_6\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_6\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_6\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_6\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_6\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_6\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_6\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_6\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_6\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_6\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_6\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_6\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_6\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_6\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_6\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_6\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_6\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_6\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_6\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_6\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_6\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_6\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_6\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_6\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_6\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "int border;\n",
    "\n",
    "void setup() {\n",
    "    size(500, 200); \n",
    "    border = 30;\n",
    "}\n",
    "\n",
    "void drawAxises(int x, int y, int w, int h) {\n",
    "    fill(255);\n",
    "    rect(x, y, w, h);\n",
    "    line(x + border, y + border, x + border, y + h - border);\n",
    "    line(x + border, y + h - border, x + w - border, y + h - border);\n",
    "}\n",
    "\n",
    "void drawPoint(int x, int y, int w, int h, float px, float py) {\n",
    "    fill(255, 0, 0);\n",
    "    ellipse(px + border + x, h + y - border - py, 5, 5);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    int chartX = 20;\n",
    "    int chartY = 10;\n",
    "    int chartWidth = width - chartX * 2;\n",
    "    int chartHeight = height - chartY * 2;\n",
    "    drawAxises(chartX, chartY, chartWidth, chartHeight);\n",
    "    \n",
    "    for (int i = 0; i < chartWidth - border * 2; i += 10) {\n",
    "        drawPoint(chartX, chartY, chartWidth, chartHeight, i, \n",
    "                  random(chartHeight - border * 2));\n",
    "    }\n",
    "    noLoop();\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Lines"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To make a Line plot, we only need keep a running place holder for the last point draw, and connect to the current point."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_12\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_12\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_12\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_12\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_12\">\n",
       "  <b>Sketch #12:</b><br/>\n",
       "  <canvas id=\"canvas_12\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_12\">\n",
       "  <button id=\"run_button_12\" onclick=\"startSketch('12');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_12\" onclick=\"pauseSketch('12');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_12\" onclick=\"setupSketch('12');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_12\" onclick=\"drawSketch('12');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #12 state:</b> <span id=\"state_12\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'int border;\\nint prev_x, prev_y;\\n\\nvoid setup() {\\n    size(800, 200); \\n    border = 30;\\n    prev_x = -1;\\n    prev_y = -1;\\n}\\n\\nvoid drawAxises(int x, int y, int w, int h) {\\n    fill(255);\\n    rect(x, y, w, h);\\n    line(x + border, y + border, x + border, y + h - border);\\n    line(x + border, y + h - border, x + w - border, y + h - border);\\n}\\n\\nvoid drawPoint(int x, int y, int w, int h, float px, float py) {\\n    fill(255, 0, 0);\\n    ellipse(px + border + x, h + y - border - py, 5, 5);\\n    if (prev_x != -1) {\\n        line(px + border + x, h + y - border - py, prev_x, prev_y);\\n    }\\n    prev_x = int(px + border + x);    // need to convert float to int\\n    prev_y = int(h + y - border - py); // need to convert float to int\\n}\\n\\nvoid draw() {\\n    int chartX = 20;\\n    int chartY = 10;\\n    int chartWidth = width - chartX * 2;\\n    int chartHeight = height - chartY * 2;\\n    drawAxises(chartX, chartY, chartWidth, chartHeight);\\n    \\n    for (int i = 0; i < chartWidth - border * 2; i += 10) {\\n        drawPoint(chartX, chartY, chartWidth, chartHeight, i, random(chartHeight - border * 2));\\n    }\\n    noLoop();\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_12\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_12\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_12\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_12\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_12\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_12\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_12\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_12\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_12\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_12\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_12\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_12\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_12\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_12\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_12\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_12\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_12\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_12\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_12\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_12\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_12\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_12\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_12\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_12\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_12\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_12\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "int border;\n",
    "int prev_x, prev_y;\n",
    "\n",
    "void setup() {\n",
    "    size(800, 200); \n",
    "    border = 30;\n",
    "    prev_x = -1;\n",
    "    prev_y = -1;\n",
    "}\n",
    "void drawAxises(int x, int y, int w, int h) {\n",
    "    fill(255);\n",
    "    rect(x, y, w, h);\n",
    "    line(x + border, y + border, x + border, y + h - border);\n",
    "    line(x + border, y + h - border, x + w - border, y + h - border);\n",
    "}\n",
    "\n",
    "void drawPoint(int x, int y, int w, int h, float px, float py) {\n",
    "    fill(255, 0, 0);\n",
    "    ellipse(px + border + x, h + y - border - py, 5, 5);\n",
    "    if (prev_x != -1) {\n",
    "        line(px + border + x, h + y - border - py, prev_x, prev_y);\n",
    "    }\n",
    "    prev_x = int(px + border + x);    // need to convert float to int\n",
    "    prev_y = int(h + y - border - py); // need to convert float to int\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    int chartX = 20;\n",
    "    int chartY = 10;\n",
    "    int chartWidth = width - chartX * 2;\n",
    "    int chartHeight = height - chartY * 2;\n",
    "    drawAxises(chartX, chartY, chartWidth, chartHeight);\n",
    "    \n",
    "    for (int i = 0; i < chartWidth - border * 2; i += 10) {\n",
    "        drawPoint(chartX, chartY, chartWidth, chartHeight, i, random(chartHeight - border * 2));\n",
    "    }\n",
    "    noLoop();\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bar charts"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "One can easily turn the points into height to draw a rectangle."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_13\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_13\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_13\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_13\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_13\">\n",
       "  <b>Sketch #13:</b><br/>\n",
       "  <canvas id=\"canvas_13\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_13\">\n",
       "  <button id=\"run_button_13\" onclick=\"startSketch('13');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_13\" onclick=\"pauseSketch('13');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_13\" onclick=\"setupSketch('13');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_13\" onclick=\"drawSketch('13');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #13 state:</b> <span id=\"state_13\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'int border;\\n\\nvoid setup() {\\n    size(500, 200); \\n    border = 20;\\n}\\n\\nvoid clear(int x, int y, int w, int h) {\\n    fill(255);\\n    rect(x, y, w, h);\\n}\\n\\nvoid drawAxises(int x, int y, int w, int h) {\\n    stroke(0);\\n    line(x + border, y + border, x + border, y + h - border);\\n    line(x + border, y + h - border, y + w - border, y + h - border);\\n}\\n\\nvoid drawBar(int x, int y, int w, int h, int total, int pos, float percent, color c) {\\n    float pw = (w - (border * 2)) / total;\\n    float px = x + border + (pw * pos);\\n    float ph = percent/100.0 * (h - border * 2);\\n    float py = y + h - border - ph;\\n    fill(200);\\n    noStroke();\\n    rect(px + pw * .20 + 10, py + 10, pw - pw * .40, ph - 10);\\n    fill(c);\\n    stroke(c);\\n    rect(px + pw * .20, py, pw - pw * .40, ph);\\n}\\n\\nvoid draw() {\\n    int chartX = 20;\\n    int chartY = 10;\\n    int chartWidth = width - chartX * 2;\\n    int chartHeight = height - chartY * 2;\\n    clear(chartX, chartY, chartWidth, chartHeight);\\n    \\n    drawBar(chartX, chartY, chartWidth, chartHeight, 5, 0, 100, color(255, 0, 0));\\n    drawBar(chartX, chartY, chartWidth, chartHeight, 5, 1, 50, color(0, 255, 0));\\n    drawBar(chartX, chartY, chartWidth, chartHeight, 5, 2, 25, color(0, 128, 128));\\n    drawBar(chartX, chartY, chartWidth, chartHeight, 5, 3, 75, color(0, 0, 255));\\n    drawBar(chartX, chartY, chartWidth, chartHeight, 5, 4, 10, color(128, 255, 128));\\n    drawAxises(chartX, chartY, chartWidth, chartHeight);\\n    noLoop();\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_13\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_13\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_13\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_13\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_13\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_13\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_13\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_13\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_13\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_13\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_13\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_13\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_13\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_13\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_13\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_13\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_13\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_13\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_13\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_13\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_13\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_13\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_13\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_13\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_13\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_13\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_13\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_13\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "int border;\n",
    "\n",
    "void setup() {\n",
    "    size(500, 200); \n",
    "    border = 20;\n",
    "}\n",
    "\n",
    "void clear(int x, int y, int w, int h) {\n",
    "    fill(255);\n",
    "    rect(x, y, w, h);\n",
    "}\n",
    "\n",
    "void drawAxises(int x, int y, int w, int h) {\n",
    "    stroke(0);\n",
    "    line(x + border, y + border, x + border, y + h - border);\n",
    "    line(x + border, y + h - border, y + w - border, y + h - border);\n",
    "}\n",
    "\n",
    "void drawBar(int x, int y, int w, int h, int total, \n",
    "             int position, float percent, color c) {\n",
    "    float pw = (w - (border * 2)) / total;\n",
    "    float px = x + border + (pw * position);\n",
    "    float ph = percent/100.0 * (h - border * 2);\n",
    "    float py = y + h - border - ph;\n",
    "    fill(200);\n",
    "    noStroke();\n",
    "    rect(px + pw * .20 + 10, py + 10, pw - pw * .40, ph - 10);\n",
    "    fill(c);\n",
    "    stroke(c);\n",
    "    rect(px + pw * .20, py, pw - pw * .40, ph);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    int chartX = 20;\n",
    "    int chartY = 10;\n",
    "    int chartWidth = width - chartX * 2;\n",
    "    int chartHeight = height - chartY * 2;\n",
    "    clear(chartX, chartY, chartWidth, chartHeight);\n",
    "    \n",
    "    drawBar(chartX, chartY, chartWidth, chartHeight, \n",
    "            5, 0, 100, color(255, 0, 0));\n",
    "    drawBar(chartX, chartY, chartWidth, chartHeight, \n",
    "            5, 1, 50, color(0, 255, 0));\n",
    "    drawBar(chartX, chartY, chartWidth, chartHeight, \n",
    "            5, 2, 25, color(0, 128, 128));\n",
    "    drawBar(chartX, chartY, chartWidth, chartHeight, \n",
    "            5, 3, 75, color(0, 0, 255));\n",
    "    drawBar(chartX, chartY, chartWidth, chartHeight, \n",
    "            5, 4, 10, color(128, 255, 128));\n",
    "    drawAxises(chartX, chartY, chartWidth, chartHeight);\n",
    "    noLoop();\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Pie charts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_17\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_17\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_17\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_17\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_17\">\n",
       "  <b>Sketch #17:</b><br/>\n",
       "  <canvas id=\"canvas_17\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_17\">\n",
       "  <button id=\"run_button_17\" onclick=\"startSketch('17');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_17\" onclick=\"pauseSketch('17');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_17\" onclick=\"setupSketch('17');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_17\" onclick=\"drawSketch('17');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #17 state:</b> <span id=\"state_17\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'arc(50, 50, 50, 50, PI * 1.5, PI * 2);';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_17\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_17\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_17\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_17\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_17\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_17\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_17\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_17\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_17\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_17\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_17\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_17\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_17\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_17\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_17\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_17\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_17\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_17\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_17\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_17\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_17\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_17\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_17\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_17\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_17\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_17\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_17\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_17\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "arc(50, 50, 50, 50, PI * 1.5, PI * 2);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_19\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_19\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_19\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_19\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_19\">\n",
       "  <b>Sketch #19:</b><br/>\n",
       "  <canvas id=\"canvas_19\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_19\">\n",
       "  <button id=\"run_button_19\" onclick=\"startSketch('19');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_19\" onclick=\"pauseSketch('19');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_19\" onclick=\"setupSketch('19');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_19\" onclick=\"drawSketch('19');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #19 state:</b> <span id=\"state_19\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'int border;\\n\\nvoid setup() {\\n    size(200, 200); \\n    border = 20;\\n}\\n\\nvoid drawBackground(int cx, int cy, int w, int h) {\\n    fill(255);\\n    ellipse(cx, cy, w, h);\\n}\\n\\nvoid drawPie(int x, int y, int w, int h, float start, float percent, color c) {\\n    fill(c);\\n    stroke(0);\\n    float rstart = start/100 * (2 * PI);\\n    float rstop = rstart + percent/100 * (2 * PI);\\n    arc(x, y, w, h, rstart, rstop);\\n}\\n\\nvoid draw() {\\n    int x = width/2;\\n    int y = height/2;\\n    int w = width - border * 2;\\n    int h = height - border * 2;\\n    //drawBackground(x, y, w, h);\\n    drawPie(x +20, y+20, w, h, 0, 25, color(255, 0, 0));\\n    drawPie(x, y, w, h, 25, 25, color(0, 255, 0));\\n    drawPie(x, y, w, h, 50, 10, color(0, 0, 255));\\n    drawPie(x, y, w, h, 60, 40, color(0, 255, 255));\\n}\\n';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_19\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_19\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_19\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_19\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_19\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_19\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_19\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_19\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_19\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_19\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_19\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_19\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_19\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_19\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_19\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_19\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_19\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_19\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_19\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_19\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_19\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_19\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_19\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_19\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_19\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "int border;\n",
    "\n",
    "void setup() {\n",
    "    size(200, 200); \n",
    "    border = 20;\n",
    "}\n",
    "\n",
    "void drawBackground(int cx, int cy, int w, int h) {\n",
    "    fill(255);\n",
    "    ellipse(cx, cy, w, h);\n",
    "}\n",
    "\n",
    "void drawPie(int x, int y, int w, int h, float start, float percent, color c) {\n",
    "    fill(c);\n",
    "    stroke(0);\n",
    "    float rstart = start/100 * (2 * PI);\n",
    "    float rstop = rstart + percent/100 * (2 * PI);\n",
    "    arc(x, y, w, h, rstart, rstop);\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    int x = width/2;\n",
    "    int y = height/2;\n",
    "    int w = width - border * 2;\n",
    "    int h = height - border * 2;\n",
    "    //drawBackground(x, y, w, h);\n",
    "    drawPie(x +20, y+20, w, h, 0, 25, color(255, 0, 0));\n",
    "    drawPie(x, y, w, h, 25, 25, color(0, 255, 0));\n",
    "    drawPie(x, y, w, h, 50, 10, color(0, 0, 255));\n",
    "    drawPie(x, y, w, h, 60, 40, color(0, 255, 255));\n",
    "}\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Geographic: Maps + data"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "First, we need to download a SVG (Scalable Vector Graphics) image file. We use the metacommand %download."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%download http://upload.wikimedia.org/wikipedia/commons/archive/3/32/20091105194402%21Blank_US_Map.svg"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Next, we rename the file using the \"shell\" command \"mv\" -- short for \"move\":"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "! mv 20091105194402%21Blank_US_Map.svg usa-wikipedia.svg"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, we can use the usa-wikipedia.svg file."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### PShape"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We will use a shape object from Processing, called PShape. We can load a shape from an SVG image file.\n",
    "\n",
    "Likewise, we can get a part of the file by using the state abbreviations."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_20\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_20\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_20\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_20\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_20\">\n",
       "  <b>Sketch #20:</b><br/>\n",
       "  <canvas id=\"canvas_20\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_20\">\n",
       "  <button id=\"run_button_20\" onclick=\"startSketch('20');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_20\" onclick=\"pauseSketch('20');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_20\" onclick=\"setupSketch('20');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_20\" onclick=\"drawSketch('20');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #20 state:</b> <span id=\"state_20\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'PShape usa;\\nPShape michigan;\\nPShape ohio;\\n\\nvoid setup() {\\n    size(959, 593);  \\n    usa = loadShape(\"usa-wikipedia.svg\");\\n    michigan = usa.getChild(\"MI\");\\n    ohio = usa.getChild(\"OH\");\\n}\\n\\nvoid draw() {\\n    background(255);\\n  \\n    // Draw the full map\\n    shape(usa, 0, 0);\\n  \\n    // Disable the colors found in the SVG file\\n    michigan.disableStyle();\\n    // Set our own coloring\\n    fill(0, 51, 102);\\n    noStroke();\\n    // Draw a single state\\n    shape(michigan, 0, 0); // Wolverines!\\n  \\n    // Disable the colors found in the SVG file\\n    ohio.disableStyle();\\n    // Set our own coloring\\n    fill(153, 0, 0);\\n    noStroke();\\n    // Draw a single state\\n    shape(ohio, 0, 0);  // Buckeyes!\\n    noLoop();\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_20\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_20\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_20\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_20\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_20\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_20\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_20\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_20\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_20\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_20\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_20\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_20\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_20\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_20\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_20\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_20\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_20\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_20\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_20\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_20\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_20\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_20\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_20\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_20\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_20\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_20\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_20\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_20\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "PShape usa;\n",
    "PShape michigan;\n",
    "PShape ohio;\n",
    "\n",
    "void setup() {\n",
    "    size(959, 593);  \n",
    "    usa = loadShape(\"usa-wikipedia.svg\");\n",
    "    michigan = usa.getChild(\"MI\");\n",
    "    ohio = usa.getChild(\"OH\");\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(255);\n",
    "  \n",
    "    // Draw the full map\n",
    "    shape(usa, 0, 0);\n",
    "  \n",
    "    // Disable the colors found in the SVG file\n",
    "    michigan.disableStyle();\n",
    "    // Set our own coloring\n",
    "    fill(0, 51, 102);\n",
    "    noStroke();\n",
    "    // Draw a single state\n",
    "    shape(michigan, 0, 0); // Wolverines!\n",
    "  \n",
    "    // Disable the colors found in the SVG file\n",
    "    ohio.disableStyle();\n",
    "    // Set our own coloring\n",
    "    fill(153, 0, 0);\n",
    "    noStroke();\n",
    "    // Draw a single state\n",
    "    shape(ohio, 0, 0);  // Buckeyes!\n",
    "    noLoop();\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Calysto Processing",
   "language": "java",
   "name": "calysto_processing"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "text/x-java",
    "version": 2
   },
   "file_extension": ".java",
   "mimetype": "text/x-java",
   "name": "java"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}